<template lang="html">
    <div class="container" v-loading="loading">
        <div class="el_tabs">
          <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="定制需求" name="first"></el-tab-pane>
              <el-tab-pane label="加购项目" name="second"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                  <el-input class="form_input" v-model="searchText" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :disabled="loading" size="small" @click="onSubmit">搜索</el-button>
                  <el-button type="primary" size="small" @click="onAddtion">新增</el-button>
                  <el-button type="danger" :disabled="isDisabled" size="small" @click="onBatch">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="tables">
          <el-table :data="tableData" @selection-change="handleSelectionChange" :row-class-name="rowStyle" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
                <el-table-column type="selection" width="40" align="center"></el-table-column>
                <el-table-column :prop="tabName" label="名称" align="center"></el-table-column>
                <el-table-column :prop="tabDetail" label="参数" align="center"></el-table-column>
                <el-table-column prop="selectRule" label="选项规则" align="center" width="150">
                  <template slot-scope="scope">
                    <p v-if="scope.row.selectRule == 1">单选</p>
                    <p v-else>多选</p>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="状态" align="center" width="100">
                  <template slot-scope="scope">
                      <el-switch @change="onSwitch(scope.row)" v-model="scope.row.opState" :active-value="1" :inactive-value="2" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="scope">
                          <el-button type="primary" size="mini" @click="fEdit(scope.row)">编辑</el-button>
                          <el-button type="danger" size="mini" @click="fDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
          </el-table>
          <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />
        </div>

        <el-dialog :title="dialogTitle+'需求'" v-loading="loading" :visible.sync="dialogVisible" append-to-body width="35%">
            <div class="form">
                <div class="form_item">
                    <span> <i>*</i> 需求名称</span>
                    <el-input class="el_input" v-model="addForm.customName" placeholder="请输入需求名称"></el-input>
                </div>
                <div class="form_item">
                    <span> <i>*</i> 选项规则</span>
                    <div class="el-input">
                      <el-radio v-model="addForm.selectRule" :label="1">单选</el-radio>
                      <el-radio v-model="addForm.selectRule" :label="2">多选</el-radio>
                    </div>
                </div>
                <div class="form_item" v-for="(item,index) in addForm.params" :key="index">
                    <span> <i>*</i> 需求参数{{index+1}}</span>
                    <div class="el-input">
                      <el-input class="el_input input1" v-model="item.customDetailNams" placeholder="请输入参数名称"></el-input>
                      <el-input class="el_input input2" type="number" v-model="item.prices" placeholder="请输入参数价格"></el-input>&nbsp;元
                    </div>
                    <i class="icon el-icon-delete-solid" @click="delLine(index)"></i>
                </div>
                <div class="form_button">
                    <el-button type="text" @click="onAddtionItem">添加参数</el-button>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm1">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="dialogTitle+'加购项目'" v-loading="loading" :visible.sync="dialogVisible2" append-to-body width="35%">
          <div class="form">
              <div class="form_item">
                  <span> <i>*</i> 加购名称</span>
                  <el-input class="el_input" v-model="addForm.additionName" placeholder="请输入需求名称"></el-input>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 选项规则</span>
                  <div class="el-input">
                    <el-radio v-model="addForm.selectRule" :label="1">单选</el-radio>
                    <el-radio v-model="addForm.selectRule" :label="2">多选</el-radio>
                  </div>
              </div>
              <div class="form_item" v-for="(item,index) in addForm.params" :key="index">
                  <span> <i>*</i> 加购参数{{index+1}}</span>
                  <div class="el-input">
                    <el-input class="el_input input1" v-model="item.detailNames" placeholder="请输入参数名称"></el-input>
                    <el-input class="el_input input2" type="number" v-model="item.prices" placeholder="请输入参数价格"></el-input>&nbsp;元
                  </div>
                  <i class="icon el-icon-delete-solid" @click="delLine(index)"></i>
              </div>
              <div class="form_button">
                  <el-button type="text" @click="onAddtionItem">添加参数</el-button>
              </div>
          </div>

          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="confirm2">确 定</el-button>
          </span>
      </el-dialog>


    </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      searchText: '',
      activeName: 'first',
      currentPage: 1,
      totalPage: 0,
      pageSize: 10,
      tableData: [],
      currentData:[],
      dialogVisible: false,
      dialogVisible2: false,
      tabName: 'customName',
      tabDetail: 'customDetailName',
      addForm: {params: [{}]},
      dialogTitle: '',
    }
  },
  computed:{
    isDisabled:function() {
      return this.currentData.length>0?false:true;
    },
    // cVisible:function () {
    //   return this.activeName == 'first'&&this.dialogVisible?true:false
    // },
    // cVisible2:function() {
    //   return this.activeName == 'second'&&this.dialogVisible?true:false
    // }
  },
  created(){
    this.getList();
  },
  methods:{
    handleClick(){
      this.$set(this,'searchText','');
      this.$set(this,'currentData',[]);
      this.$set(this,'tableData',[]);
      this.$set(this,'addForm',{params: [{}]});
      if(this.activeName == 'first'){
        this.$set(this,'tabName','customName');
        this.$set(this,'tabDetail','customDetailName');
      }else{
        this.$set(this,'tabName','additionalName');
        this.$set(this,'tabDetail','additionalDetail');
      }
      this.onSubmit();
    },
    async getList(){
      this.loading = true;
      let res = null;
      if(this.activeName == 'first'){
        res = await this.$http.selectCommodityCustomPage({
          query: this.searchText,
          pageSize: this.pageSize,
          pageNumber: this.currentPage
        });
      }else if(this.activeName == 'second'){
        res = await this.$http.selectCommodityAdditionalPage({
          query: this.searchText,
          pageSize: this.pageSize,
          pageNumber: this.currentPage
        });
      }
      this.loading = false;
      this.$set(this,'tableData',res.data.rows);
      this.$set(this,'totalPage',res.data.total);
      this.$set(this,'pageSize',res.data.pageSize);
    },

    delLine(i){
      this.$confirm('确定删除此参数吗？').then(()=>{
        this.addForm.params.splice(i,1);
      })
    },
    onAddtion(){
      this.addForm = {params: [{}]};
      this.dialogTitle = '新增';
      if(this.activeName == 'first'){
        this.dialogVisible = true;
      }else{
        this.dialogVisible2 = true;
      }
    },
    async getDetail(e){
      let res = null;
      this.loading = true;
      if(this.activeName == 'first'){
        res = await this.$http.selectCommodityCustom({id: e.id});
      }else{
        res = await this.$http.selectCommodityAdditional({id: e.id});
      }
      this.loading = false;
      if(res.data.code == 0){
        if(this.activeName == 'first'){
          this.$set(this.addForm,'id',res.data.data.id);
          this.$set(this.addForm,'customName',res.data.data.customName);
          this.$set(this.addForm,'selectRule',res.data.data.selectRule);
          if(res.data.data.commodityCustomDetail.length !== 0){
            this.addForm.params = [];
            res.data.data.commodityCustomDetail.forEach(item=>{
              this.addForm.params.push({
                customDetailNams: item.customDetailName,
                prices: item.price?Number(item.price):null
              });
            });
          }
        }else{
          this.$set(this.addForm,'id',res.data.data.id);
          this.$set(this.addForm,'additionName',res.data.data.additionalName);
          this.$set(this.addForm,'selectRule',res.data.data.selectRule);
          if(res.data.data.commodityAdditionalDetail.length !== 0){
            this.addForm.params = [];
            res.data.data.commodityAdditionalDetail.forEach(item=>{
              this.addForm.params.push({
                detailNames: item.detailName,
                prices: item.price?Number(item.price):null
              });
            });
          }
        }
        if(this.activeName == 'first'){
          this.dialogVisible = true;
        }else{
          this.dialogVisible2 = true;
        }
      }
    },
    fEdit(e){
      this.dialogTitle = '编辑';
      this.getDetail(e);
    },
    async insert(data){
      this.loading = true;
      let res = null;
      if(this.activeName == 'first'){
        res = await this.$http.insertCommodityCustom(data);
      }else{
        res = await this.$http.insertCommodityAdditional(data);
      }
      this.loading = false;
      if(res.data.code == 0){
        this.$message.success(res.data.message);
        if(this.activeName == 'first'){
          this.dialogVisible = false;
        }else{
          this.dialogVisible2 = false;
        }
        this.onSubmit();
      }else{
        this.$message.error(res.data.message);
      }
    },
    async update(data){
      this.loading = true;
      let res = null;
      if(this.activeName == 'first'){
        res = await this.$http.updateCommodityCustom(data);
      }else{
        res = await this.$http.updateCommodityAdditional(data);
      }
      this.loading = false;
      if(res.data.code == 0){
        this.$message.success(res.data.message);
        if(this.activeName == 'first'){
          this.dialogVisible = false;
        }else{
          this.dialogVisible2 = false;
        }
        this.onSubmit();
      }else{
        this.$message.error(res.data.message);
      }
    },
    confirm1(){
      if(!this.addForm.customName){
        this.$message.error('请填写需求名称！！');
        return false;
      }else if(!this.addForm.selectRule){
        this.$message.error('请选择规则！！');
        return false;
      }
      for(let i=0;i<this.addForm.params.length;i++){
        if(!this.addForm.params[i].customDetailNams){
          this.$message.error('请填写参数名称！！');
          return false;
        }
        if(!this.addForm.params[i].prices){
          this.$message.error('请填写参数价格！！');
          return false;
        }
      }
      let customDetails = [],prices=[];
      this.addForm.params.forEach(item=>{
        customDetails.push(item.customDetailNams);
        prices.push(item.prices);
      });
      let data = {
        customName: this.addForm.customName,
        selectRule: this.addForm.selectRule,
        customDetailNams: customDetails.join('@'),
        prices: prices.join(',')
      };
      // console.log(data);
      if(this.addForm.id){
        data.id = this.addForm.id;
        this.update(data);
      }else{
        this.insert(data);
      }

    },
    confirm2(){
      if(!this.addForm.additionName){
        this.$message.error('请填写加购名称！！');
        return false;
      }else if(!this.addForm.selectRule){
        this.$message.error('请选择规则！！');
        return false;
      }
      for(let i=0;i<this.addForm.params.length;i++){
        if(!this.addForm.params[i].detailNames){
          this.$message.error('请填写参数名称！！');
          return false;
        }
        if(!this.addForm.params[i].prices){
          this.$message.error('请填写参数价格！！');
          return false;
        }
      }
      let customDetails = [],prices=[];
      this.addForm.params.forEach(item=>{
        customDetails.push(item.detailNames);
        prices.push(item.prices);
      });
      let data = {
        additionName: this.addForm.additionName,
        selectRule: this.addForm.selectRule,
        detailNames: customDetails.join('@'),
        prices: prices.join(',')
      };
      if(this.addForm.id){
        data.id = this.addForm.id;
        this.update(data);
      }else{
        this.insert(data);
      }

    },
    onAddtionItem(){
      this.addForm.params.push({});
    },
    onBatch(){
      let aId = [];
      this.currentData.forEach(item=>{aId.push(item.id)});
      this.$confirm('您确定要删除这些吗？').then(res=>{
        if(this.activeName == 'first'){
          return this.$http.deleteCommodityCustoms({ids:aId.join(',')})
        }else{
          return this.$http.deleteCommodityAdditionals({ids:aId.join(',')})
        }
      }).then(res=>{
        if(res.data.code == 0){
          this.$message.success('删除成功');
          this.getList();
        }else{
          this.$message.error(res.data.message);
        }
      }).catch(e=>0);
    },
    fDelete(e){
      this.$confirm('您确定要删除吗？').then(res=>{
        if(this.activeName == 'first'){
          return this.$http.deleteCommodityCustom({id:e.id});
        }else{
          return this.$http.deleteCommodityAdditional({id:e.id});
        }
      }).then(res=>{
          if(res.data.code == 0){
            this.$message.success('删除成功');
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
      }).catch(e=>0);
    },
    onSubmit(){
      this.handleCurrentChange(1);
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.currentPage = e;
      this.getList();
    },
    handleSelectionChange(e){
      this.currentData = [];
      this.currentData = this.currentData.concat(e);
    },
    async switchFunctional(e){
      let res = null;
      if(this.activeName == 'first'){
        res = await this.$http.closeCommodityCustom({id: e.id,opState:e.opState});
      }else if(this.activeName == 'second'){
        res = await this.$http.closeCommodityAdditional({id: e.id,opState:e.opState});
      }
      if(res.data.code===0){
          this.$message.success(res.data.message);
      }else{
          this.$message.error(res.data.message);
      }
    },
    onSwitch(e){
      this.switchFunctional(e);
    },
    rowStyle({row,rowIndex}) {
      for(let i=0;i<this.currentData.length;i++){
        if(JSON.stringify(row) == JSON.stringify(this.currentData[i])){
          return 'row_style';
        }
      }
    },

  }

}
</script>

<style lang="css" scoped>
i{font-style: normal;color: #FB3F3F;}
.icon{cursor: pointer;}
.form_item span{
  display: inline-block;
  width: 80px;
  font-size: 13px;
  color: #333333;
}
.form_item .el-input,.form_item .el-textarea{
  width: 80%
}
.form_item .el-input{
  display: flex;
  align-items: center;
}
.form_item{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.form_item .input1{
  width: 60%;
}
.form_item .input2{
  width: 30%;
}
.form_item .el-input span{
  width: 10%
}
.form_button{
  width: 100%;
  text-align: right
}
</style>
